<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交互式网络架构图</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            padding: 25px;
            overflow: hidden;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }

        h1 {
            color: #2c3e50;
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .description {
            color: #7f8c8d;
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .dashboard {
            display: flex;
            gap: 25px;
            margin-bottom: 25px;
        }

        .controls {
            flex: 1;
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .controls h2 {
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .control-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #34495e;
        }

        select, input, button {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
            font-size: 1rem;
        }

        button {
            background: #3498db;
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        button:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        button:active {
            transform: translateY(0);
        }

        .network-container {
            flex: 3;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }

        #network-topology {
            width: 100%;
            height: 600px;
            background: #f9f9f9;
        }

        .legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 4px;
        }

        .node {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .node:hover {
            filter: brightness(1.2);
        }

        .node-label {
            font-size: 12px;
            font-weight: bold;
            text-anchor: middle;
            pointer-events: none;
            fill: white;
        }

        .link {
            stroke: #95a5a6;
            stroke-width: 2;
            fill: none;
        }

        .link-label {
            font-size: 10px;
            font-weight: bold;
            fill: #e74c3c;
            text-anchor: middle;
            pointer-events: none;
        }

        .tooltip {
            position: absolute;
            padding: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border-radius: 4px;
            pointer-events: none;
            font-size: 14px;
            z-index: 10;
            max-width: 300px;
        }

        .tooltip h3 {
            margin-bottom: 5px;
            color: #3498db;
        }

        .status-panel {
            margin-top: 20px;
            padding: 15px;
            background: #ecf0f1;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .status-panel h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .status-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid #bdc3c7;
        }

        footer {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }

        @media (max-width: 1024px) {
            .dashboard {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>交互式网络架构图</h1>
            <p class="description">使用D3.js库创建的三层网络架构图，支持设备拖拽、实时流量显示和设备信息查看。</p>
        </header>

        <div class="dashboard">
            <div class="controls">
                <h2>控制面板</h2>

                <div class="control-group">
                    <h3>添加设备</h3>
                    <label for="deviceType">设备类型:</label>
                    <select id="deviceType">
                        <option value="router">路由器</option>
                        <option value="switch">交换机</option>
                        <option value="server">服务器</option>
                        <option value="firewall">防火墙</option>
                        <option value="storage">存储设备</option>
                    </select>

                    <label for="deviceName">设备名称:</label>
                    <input type="text" id="deviceName" placeholder="输入设备名称">

                    <label for="deviceLayer">网络层级:</label>
                    <select id="deviceLayer">
                        <option value="core">核心层</option>
                        <option value="distribution">汇聚层</option>
                        <option value="access">接入层</option>
                    </select>

                    <button id="addDeviceBtn">添加设备</button>
                </div>

                <div class="control-group">
                    <h3>添加连接</h3>
                    <label for="sourceDevice">源设备:</label>
                    <select id="sourceDevice"></select>

                    <label for="targetDevice">目标设备:</label>
                    <select id="targetDevice"></select>

                    <label for="linkBandwidth">带宽 (Mbps):</label>
                    <input type="number" id="linkBandwidth" value="1000" min="10" max="10000">

                    <button id="addLinkBtn">添加连接</button>
                </div>

                <div class="control-group">
                    <h3>视图控制</h3>
                    <button id="resetViewBtn">重置视图</button>
                    <button id="toggleTrafficBtn">切换流量显示</button>
                    <button id="autoLayoutBtn">自动布局</button>
                </div>
            </div>

            <div class="network-container">
                <div id="network-topology"></div>
            </div>
        </div>

        <div class="legend">
            <div class="legend-item">
                <div class="legend-color" style="background-color: #e74c3c;"></div>
                <span>路由器</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #3498db;"></div>
                <span>交换机</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #2ecc71;"></div>
                <span>服务器</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #f39c12;"></div>
                <span>防火墙</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #9b59b6;"></div>
                <span>存储设备</span>
            </div>
        </div>

        <div class="status-panel">
            <h3>系统状态</h3>
            <div class="status-item">
                <span>设备总数:</span>
                <span id="deviceCount">0</span>
            </div>
            <div class="status-item">
                <span>连接总数:</span>
                <span id="linkCount">0</span>
            </div>
            <div class="status-item">
                <span>网络层级:</span>
                <span>核心层、汇聚层、接入层</span>
            </div>
        </div>

        <footer>
            <p>使用 D3.js 构建 | 交互式网络架构图示例</p>
        </footer>
    </div>

    <script>
        // 初始网络数据
        const initialNodes = [
            { id: "core-router", name: "核心路由器", type: "router", layer: "core", x: 400, y: 100, cpu: 45, memory: 60 },
            { id: "dist-switch-1", name: "汇聚交换机1", type: "switch", layer: "distribution", x: 250, y: 250, cpu: 30, memory: 40 },
            { id: "dist-switch-2", name: "汇聚交换机2", type: "switch", layer: "distribution", x: 550, y: 250, cpu: 25, memory: 35 },
            { id: "access-switch-1", name: "接入交换机1", type: "switch", layer: "access", x: 150, y: 400, cpu: 15, memory: 25 },
            { id: "access-switch-2", name: "接入交换机2", type: "switch", layer: "access", x: 400, y: 400, cpu: 20, memory: 30 },
            { id: "access-switch-3", name: "接入交换机3", type: "switch", layer: "access", x: 650, y: 400, cpu: 18, memory: 28 },
            { id: "web-server", name: "Web服务器", type: "server", layer: "access", x: 150, y: 500, cpu: 60, memory: 70 },
            { id: "db-server", name: "数据库服务器", type: "server", layer: "access", x: 400, y: 500, cpu: 75, memory: 80 },
            { id: "file-server", name: "文件服务器", type: "server", layer: "access", x: 650, y: 500, cpu: 40, memory: 65 },
            { id: "firewall", name: "防火墙", type: "firewall", layer: "core", x: 700, y: 100, cpu: 50, memory: 45 },
            { id: "storage", name: "存储阵列", type: "storage", layer: "distribution", x: 700, y: 250, cpu: 20, memory: 90 }
        ];

        const initialLinks = [
            { source: "core-router", target: "dist-switch-1", bandwidth: 10000, traffic: 4500 },
            { source: "core-router", target: "dist-switch-2", bandwidth: 10000, traffic: 5200 },
            { source: "dist-switch-1", target: "access-switch-1", bandwidth: 1000, traffic: 800 },
            { source: "dist-switch-1", target: "access-switch-2", bandwidth: 1000, traffic: 750 },
            { source: "dist-switch-2", target: "access-switch-2", bandwidth: 1000, traffic: 650 },
            { source: "dist-switch-2", target: "access-switch-3", bandwidth: 1000, traffic: 720 },
            { source: "access-switch-1", target: "web-server", bandwidth: 100, traffic: 45 },
            { source: "access-switch-2", target: "db-server", bandwidth: 100, traffic: 85 },
            { source: "access-switch-3", target: "file-server", bandwidth: 100, traffic: 60 },
            { source: "core-router", target: "firewall", bandwidth: 1000, traffic: 320 },
            { source: "firewall", target: "dist-switch-2", bandwidth: 1000, traffic: 300 },
            { source: "dist-switch-2", target: "storage", bandwidth: 1000, traffic: 420 }
        ];

        // 颜色映射
        const colorMap = {
            router: "#e74c3c",
            switch: "#3498db",
            server: "#2ecc71",
            firewall: "#f39c12",
            storage: "#9b59b6"
        };

        // 初始化网络拓扑图
        function initNetworkTopology() {
            const width = document.getElementById('network-topology').clientWidth;
            const height = document.getElementById('network-topology').clientHeight;

            // 创建SVG容器
            const svg = d3.select("#network-topology")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

            // 创建节点和连接线数据
            let nodes = [...initialNodes];
            let links = [...initialLinks];

            // 更新设备下拉菜单
            updateDeviceSelects();

            // 创建连接线
            const link = svg.append("g")
                .attr("class", "links")
                .selectAll("line")
                .data(links)
                .enter()
                .append("line")
                .attr("class", "link")
                .attr("stroke-width", 2)
                .attr("marker-end", "url(#arrowhead)");

            // 创建连接线标签
            const linkLabel = svg.append("g")
                .attr("class", "link-labels")
                .selectAll("text")
                .data(links)
                .enter()
                .append("text")
                .attr("class", "link-label")
                .text(d => `${d.traffic} Mbps`)
                .attr("text-anchor", "middle");

            // 创建节点组
            const node = svg.append("g")
                .attr("class", "nodes")
                .selectAll("g")
                .data(nodes)
                .enter()
                .append("g")
                .attr("class", "node")
                .call(d3.drag()
                    .on("start", dragStarted)
                    .on("drag", dragged)
                    .on("end", dragEnded));

            // 创建节点矩形
            node.append("rect")
                .attr("width", 80)
                .attr("height", 40)
                .attr("x", -40)
                .attr("y", -20)
                .attr("rx", 5)
                .attr("fill", d => colorMap[d.type]);

            // 创建节点标签
            node.append("text")
                .attr("class", "node-label")
                .attr("dy", 5)
                .text(d => d.name)
                .attr("fill", "white");

            // 创建箭头标记
            svg.append("defs").append("marker")
                .attr("id", "arrowhead")
                .attr("viewBox", "0 -5 10 10")
                .attr("refX", 35)
                .attr("refY", 0)
                .attr("markerWidth", 6)
                .attr("markerHeight", 6)
                .attr("orient", "auto")
                .append("path")
                .attr("d", "M0,-5L10,0L0,5")
                .attr("fill", "#95a5a6");

            // 创建工具提示
            const tooltip = d3.select("body")
                .append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);

            // 节点悬浮事件
            node.on("mouseover", function(event, d) {
                tooltip.transition()
                    .duration(200)
                    .style("opacity", .9);
                tooltip.html(`
                    <h3>${d.name}</h3>
                    <p><strong>类型:</strong> ${getDeviceTypeName(d.type)}</p>
                    <p><strong>层级:</strong> ${getLayerName(d.layer)}</p>
                    <p><strong>CPU使用率:</strong> ${d.cpu}%</p>
                    <p><strong>内存使用率:</strong> ${d.memory}%</p>
                    <p><strong>状态:</strong> <span style="color: #2ecc71">正常运行</span></p>
                `)
                    .style("left", (event.pageX + 10) + "px")
                    .style("top", (event.pageY - 28) + "px");
            })
            .on("mouseout", function() {
                tooltip.transition()
                    .duration(500)
                    .style("opacity", 0);
            });

            // 连接线悬浮事件
            link.on("mouseover", function(event, d) {
                tooltip.transition()
                    .duration(200)
                    .style("opacity", .9);
                tooltip.html(`
                    <h3>连接信息</h3>
                    <p><strong>源设备:</strong> ${getNodeName(d.source)}</p>
                    <p><strong>目标设备:</strong> ${getNodeName(d.target)}</p>
                    <p><strong>带宽:</strong> ${d.bandwidth} Mbps</p>
                    <p><strong>当前流量:</strong> ${d.traffic} Mbps</p>
                    <p><strong>利用率:</strong> ${((d.traffic / d.bandwidth) * 100).toFixed(1)}%</p>
                `)
                    .style("left", (event.pageX + 10) + "px")
                    .style("top", (event.pageY - 28) + "px");
            })
            .on("mouseout", function() {
                tooltip.transition()
                    .duration(500)
                    .style("opacity", 0);
            });

            // 力导向模拟
            const simulation = d3.forceSimulation(nodes)
                .force("link", d3.forceLink(links).id(d => d.id).distance(100))
                .force("charge", d3.forceManyBody().strength(-500))
                .force("center", d3.forceCenter(width / 2, height / 2))
                .force("collision", d3.forceCollide().radius(60));

            // 更新节点和连接线位置
            simulation.on("tick", () => {
                link
                    .attr("x1", d => d.source.x)
                    .attr("y1", d => d.source.y)
                    .attr("x2", d => d.target.x)
                    .attr("y2", d => d.target.y);

                linkLabel
                    .attr("x", d => (d.source.x + d.target.x) / 2)
                    .attr("y", d => (d.source.y + d.target.y) / 2);

                node
                    .attr("transform", d => `translate(${d.x},${d.y})`);
            });

            // 拖拽函数
            function dragStarted(event, d) {
                if (!event.active) simulation.alphaTarget(0.3).restart();
                d.fx = d.x;
                d.fy = d.y;
            }

            function dragged(event, d) {
                d.fx = event.x;
                d.fy = event.y;
            }

            function dragEnded(event, d) {
                if (!event.active) simulation.alphaTarget(0);
                d.fx = null;
                d.fy = null;
            }

            // 更新设备下拉菜单
            function updateDeviceSelects() {
                const sourceSelect = document.getElementById('sourceDevice');
                const targetSelect = document.getElementById('targetDevice');

                // 清空现有选项
                sourceSelect.innerHTML = '';
                targetSelect.innerHTML = '';

                // 添加选项
                nodes.forEach(node => {
                    const option1 = document.createElement('option');
                    option1.value = node.id;
                    option1.textContent = node.name;
                    sourceSelect.appendChild(option1);

                    const option2 = document.createElement('option');
                    option2.value = node.id;
                    option2.textContent = node.name;
                    targetSelect.appendChild(option2);
                });

                // 更新状态面板
                document.getElementById('deviceCount').textContent = nodes.length;
                document.getElementById('linkCount').textContent = links.length;
            }

            // 获取节点名称
            function getNodeName(nodeId) {
                const node = nodes.find(n => n.id === nodeId);
                return node ? node.name : nodeId;
            }

            // 获取设备类型名称
            function getDeviceTypeName(type) {
                const typeNames = {
                    router: "路由器",
                    switch: "交换机",
                    server: "服务器",
                    firewall: "防火墙",
                    storage: "存储设备"
                };
                return typeNames[type] || type;
            }

            // 获取层级名称
            function getLayerName(layer) {
                const layerNames = {
                    core: "核心层",
                    distribution: "汇聚层",
                    access: "接入层"
                };
                return layerNames[layer] || layer;
            }

            // 添加设备
            document.getElementById('addDeviceBtn').addEventListener('click', function() {
                const type = document.getElementById('deviceType').value;
                const name = document.getElementById('deviceName').value;
                const layer = document.getElementById('deviceLayer').value;

                if (!name) {
                    alert("请输入设备名称");
                    return;
                }

                // 生成唯一ID
                const id = `device-${Date.now()}`;

                // 创建新节点
                const newNode = {
                    id: id,
                    name: name,
                    type: type,
                    layer: layer,
                    x: Math.random() * (width - 100) + 50,
                    y: Math.random() * (height - 100) + 50,
                    cpu: Math.floor(Math.random() * 30) + 10,
                    memory: Math.floor(Math.random() * 40) + 20
                };

                nodes.push(newNode);

                // 更新节点
                const newNodeElement = svg.select(".nodes")
                    .selectAll(".node")
                    .data(nodes)
                    .enter()
                    .append("g")
                    .attr("class", "node")
                    .call(d3.drag()
                        .on("start", dragStarted)
                        .on("drag", dragged)
                        .on("end", dragEnded));

                newNodeElement.append("rect")
                    .attr("width", 80)
                    .attr("height", 40)
                    .attr("x", -40)
                    .attr("y", -20)
                    .attr("rx", 5)
                    .attr("fill", d => colorMap[d.type]);

                newNodeElement.append("text")
                    .attr("class", "node-label")
                    .attr("dy", 5)
                    .text(d => d.name)
                    .attr("fill", "white");

                // 添加悬浮事件
                newNodeElement.on("mouseover", function(event, d) {
                    tooltip.transition()
                        .duration(200)
                        .style("opacity", .9);
                    tooltip.html(`
                        <h3>${d.name}</h3>
                        <p><strong>类型:</strong> ${getDeviceTypeName(d.type)}</p>
                        <p><strong>层级:</strong> ${getLayerName(d.layer)}</p>
                        <p><strong>CPU使用率:</strong> ${d.cpu}%</p>
                        <p><strong>内存使用率:</strong> ${d.memory}%</p>
                        <p><strong>状态:</strong> <span style="color: #2ecc71">正常运行</span></p>
                    `)
                        .style("left", (event.pageX + 10) + "px")
                        .style("top", (event.pageY - 28) + "px");
                })
                .on("mouseout", function() {
                    tooltip.transition()
                        .duration(500)
                        .style("opacity", 0);
                });

                // 更新模拟
                simulation.nodes(nodes);
                simulation.alpha(0.3).restart();

                // 更新设备下拉菜单
                updateDeviceSelects();

                // 清空输入
                document.getElementById('deviceName').value = '';
            });

            // 添加连接
            document.getElementById('addLinkBtn').addEventListener('click', function() {
                const sourceId = document.getElementById('sourceDevice').value;
                const targetId = document.getElementById('targetDevice').value;
                const bandwidth = parseInt(document.getElementById('linkBandwidth').value);

                if (sourceId === targetId) {
                    alert("源设备和目标设备不能相同");
                    return;
                }

                // 检查连接是否已存在
                const existingLink = links.find(link =>
                    (link.source === sourceId && link.target === targetId) ||
                    (link.source === targetId && link.target === sourceId)
                );

                if (existingLink) {
                    alert("这两个设备之间已经存在连接");
                    return;
                }

                // 创建新连接
                const newLink = {
                    source: sourceId,
                    target: targetId,
                    bandwidth: bandwidth,
                    traffic: Math.floor(Math.random() * (bandwidth * 0.8)) + 10
                };

                links.push(newLink);

                // 更新连接线
                const newLinkElement = svg.select(".links")
                    .selectAll(".link")
                    .data(links)
                    .enter()
                    .append("line")
                    .attr("class", "link")
                    .attr("stroke-width", 2)
                    .attr("marker-end", "url(#arrowhead)");

                // 更新连接线标签
                const newLinkLabel = svg.select(".link-labels")
                    .selectAll(".link-label")
                    .data(links)
                    .enter()
                    .append("text")
                    .attr("class", "link-label")
                    .text(d => `${d.traffic} Mbps`)
                    .attr("text-anchor", "middle");

                // 添加悬浮事件
                newLinkElement.on("mouseover", function(event, d) {
                    tooltip.transition()
                        .duration(200)
                        .style("opacity", .9);
                    tooltip.html(`
                        <h3>连接信息</h3>
                        <p><strong>源设备:</strong> ${getNodeName(d.source)}</p>
                        <p><strong>目标设备:</strong> ${getNodeName(d.target)}</p>
                        <p><strong>带宽:</strong> ${d.bandwidth} Mbps</p>
                        <p><strong>当前流量:</strong> ${d.traffic} Mbps</p>
                        <p><strong>利用率:</strong> ${((d.traffic / d.bandwidth) * 100).toFixed(1)}%</p>
                    `)
                        .style("left", (event.pageX + 10) + "px")
                        .style("top", (event.pageY - 28) + "px");
                })
                .on("mouseout", function() {
                    tooltip.transition()
                        .duration(500)
                        .style("opacity", 0);
                });

                // 更新模拟
                simulation.force("link", d3.forceLink(links).id(d => d.id).distance(100));
                simulation.alpha(0.3).restart();

                // 更新设备下拉菜单
                updateDeviceSelects();
            });

            // 重置视图
            document.getElementById('resetViewBtn').addEventListener('click', function() {
                // 重置节点位置
                nodes.forEach(node => {
                    node.fx = null;
                    node.fy = null;
                });

                simulation.alpha(0.3).restart();
            });

            // 切换流量显示
            let trafficVisible = true;
            document.getElementById('toggleTrafficBtn').addEventListener('click', function() {
                trafficVisible = !trafficVisible;

                if (trafficVisible) {
                    svg.selectAll(".link-label").style("display", "block");
                    this.textContent = "隐藏流量显示";
                } else {
                    svg.selectAll(".link-label").style("display", "none");
                    this.textContent = "显示流量显示";
                }
            });

            // 自动布局
            document.getElementById('autoLayoutBtn').addEventListener('click', function() {
                // 根据层级重新布局
                nodes.forEach(node => {
                    let targetY;
                    switch(node.layer) {
                        case "core":
                            targetY = 100;
                            break;
                        case "distribution":
                            targetY = 250;
                            break;
                        case "access":
                            targetY = 400;
                            break;
                        default:
                            targetY = Math.random() * (height - 100) + 50;
                    }

                    // 设置目标位置
                    node.fx = null;
                    node.fy = null;

                    // 使用力导向模拟将节点移动到目标位置
                    simulation.force("y", d3.forceY().y(targetY).strength(0.1));
                });

                simulation.alpha(0.5).restart();

                // 移除Y方向力
                setTimeout(() => {
                    simulation.force("y", null);
                }, 1000);
            });

            // 模拟实时流量更新
            setInterval(() => {
                links.forEach(link => {
                    // 随机变化流量，但不超过带宽
                    const change = (Math.random() - 0.5) * 100;
                    link.traffic = Math.max(10, Math.min(link.bandwidth * 0.9, link.traffic + change));
                });

                // 更新连接线标签
                svg.selectAll(".link-label")
                    .text(d => `${d.traffic.toFixed(0)} Mbps`);
            }, 2000);
        }

        // 初始化网络拓扑图
        window.onload = initNetworkTopology;

        // 响应窗口大小变化
        window.onresize = function() {
            d3.select("#network-topology svg").remove();
            initNetworkTopology();
        };
    </script>
</body>
</html>